<template>
    <div>
          <el-container>
            <el-header>客户管理界面</el-header>
            <el-container>
                <el-aside style="border: 5px solid #eee">
                    <el-menu>
                       
                        <el-submenu index="1">
                            <!-- 子菜单命名 -->
                             <template slot="title">
                                <span>基本信息管理</span>
                            </template>

                            <!-- 子菜单选项 -->
                            <el-menu-item-group>
                                <router-link to="/cus">
                                   <el-menu-item index="1-1">客户管理</el-menu-item>
                                </router-link>
                                <router-link to="/goods">
                                   <el-menu-item index="1-2">商品管理</el-menu-item>
                                </router-link>
                                <router-link to="/emp">
                                    <el-menu-item index="1-3">员工管理</el-menu-item>
                                </router-link> 
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="2">
                            <!-- 子菜单命名 -->
                             <template slot="title">
                                <span>采购信息管理</span>
                            </template>
                            
                            <!-- 子菜单选项 -->
                            <el-menu-item-group>
                                <router-link to="/mainBuy">
                                    <el-menu-item index="2-1">采购主表管理</el-menu-item>
                                </router-link>
                                <router-link to="/payDetail">
                                    <el-menu-item index="2-2">采购明细管理</el-menu-item>
                                </router-link>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>

                <el-main>
                    <el-button type="primary" round @click="dialogVisible1 = true">查询客户</el-button>
                    <el-dialog
                    title="查询客户"
                    :visible.sync="dialogVisible1"
                    width="20%"
                    >
                        <el-form>
                        <el-form-item label="请输入客户的编号">
                            <el-input v-model="askCus.cid"></el-input>
                        </el-form-item>
                        </el-form>

                        <span slot="footer" >
                        <el-button @click="dialogVisible1 = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible1 = false,select(askCus.cid)">确 定</el-button>
                        </span>
                    </el-dialog>

                    <el-dialog
                title="查询顾客结果"
                :visible.sync="selectRes"

                width="75%"
                >
                    <!-- <el-form>

                    <el-form-item label="客户编号:">
                        {{askCus.cid}}
                    </el-form-item>
                    <el-form-item label="客户名称:">
                        {{askCus.ccompanyName}}
                    </el-form-item>
                    <el-form-item label="客户简称:">
                        {{askCus.ccompanySName}}
                    </el-form-item>
                    <el-form-item label="地址:">
                        {{askCus.ccompanyAddress}}
                    </el-form-item>
                    <el-form-item label="公司电话:">
                        {{askCus.ccompanyPhone}}
                    </el-form-item>
                    <el-form-item label="邮件:">
                        {{askCus.cemail}}
                    </el-form-item>
                    <el-form-item label="联系人:">
                        {{askCus.cname}}
                    </el-form-item>  
                    <el-form-item label="联系人电话:">
                        {{askCus.ctelPhone}}
                    </el-form-item>
                    <el-form-item label="备注:">
                        {{askCus.other}}
                    </el-form-item>
                
                    </el-form> -->
                     <el-table v-bind:data="tmptb" border stripe style="width: 100%">
                      <el-table-column prop="cid" label="客户编号" width="150" ></el-table-column>
                      <el-table-column prop="ccompanyName" label="客户姓名" width="150" ></el-table-column>
                      <el-table-column prop="ccompanySName" label="客户简称" width="150" ></el-table-column>
                      <el-table-column prop="ccompanyAddress" label="地址" width="150"></el-table-column>
                      <el-table-column prop="ccompanyPhone" label="公司电话" width="150" ></el-table-column>
                      <el-table-column prop="cemail" label="邮件" width="150" ></el-table-column>
                      <el-table-column prop="cname" label="联系人" width="150" ></el-table-column>
                      <el-table-column prop="ctelPhone" label="联系人电话" width="150" ></el-table-column>
                      <el-table-column prop="other" label="备注" width="150" ></el-table-column>
                    </el-table>
                <el-button @click="selectRes = false">退出</el-button>
                
            </el-dialog>




                    <el-button type="primary" round @click="dialogVisible2= true">删除客户</el-button>
                    <el-dialog
                    title="删除客户"
                    :visible.sync="dialogVisible2"
                    width="20%"
                    >
                        <el-form>
                        <el-form-item label="请输入客户的编号">
                            <el-input v-model="rmCus.cid"></el-input>
                        </el-form-item>
                        </el-form>

                        <span slot="footer" >
                        <el-button @click="dialogVisible2 = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible2 = false,remove()">确 定</el-button>
                        </span>
                    </el-dialog>




                    <el-button type="primary" round @click="dialogVisible3= true">修改客户信息</el-button>
                    <el-dialog
                    title="修改客户信息"
                    :visible.sync="dialogVisible3"
                    width="20%"
                    >
                    
                        <el-form>
                            <el-form-item label="请输入客户的编号">
                            <el-input v-model="updateCus.cid"></el-input>
                            </el-form-item>
                        </el-form>
                        
                        <span slot="footer" >
                            <el-button @click="dialogVisible3 = false">取 消</el-button>
                            <el-button type="primary" @click="updateVisible = true,select1(updateCus.cid)">确 定</el-button>
                        </span>
                    
                        <el-dialog
                        title="修改客户信息"
                        :visible.sync="updateVisible"
                        width="20%"
                        >
                        
                            <el-form>

                                <el-form-item label="输入修改后的客户名称">
                                <el-input v-model="updateCus.ccompanyName"></el-input>
                                </el-form-item>


                                <el-form-item label="输入修改后的客户简称">
                                <el-input v-model="updateCus.ccompanySName"></el-input>
                                </el-form-item>
                       
                          
                                <el-form-item label="输入修改后的地址">
                                <el-input v-model="updateCus.ccompanyAddress"></el-input>
                                </el-form-item>
                           

                                <el-form-item label="输入修改后的公司电话">
                                <el-input v-model="updateCus.ccompanyPhone"></el-input>
                                </el-form-item>
                        

                            
                                <el-form-item label="输入修改后的邮件">
                                <el-input v-model="updateCus.cemail"></el-input>
                                </el-form-item>
                            

                                <el-form-item label="输入修改后的联系人">
                                <el-input v-model="updateCus.cname"></el-input>
                                </el-form-item>
                            

                                <el-form-item label="输入修改后的联系人电话">
                                <el-input v-model="updateCus.ctelPhone"></el-input>
                                </el-form-item>
                           

                                <el-form-item label="输入修改后的备注">
                                <el-input v-model="updateCus.other"></el-input>
                                </el-form-item>
                            </el-form>

                            <span slot="footer" >
                            <el-button @click="updateVisible = false,dialogVisible3 = false">取 消</el-button>
                            <el-button type="primary" @click="updateVisible = false,dialogVisible3 = false,update()">确 定</el-button>
                            </span>
                        </el-dialog>
            
                    </el-dialog>

                    <el-button type="primary" round @click="dialogVisible4= true">添加客户</el-button>
                    <el-dialog
                    title="添加客户"
                    :visible.sync="dialogVisible4"
                    width="20%"
                    >
                    <el-form>
                    <!-- <el-form-item label="请输入客户的编号">
                        <span style="color:red">此为必填项</span>
                        <el-input v-model="addCus.cid"></el-input>
                    </el-form-item> -->
                    <el-form-item label="请输入客户的姓名">
                        <span style="color:red">此为必填项</span>
                        <el-input v-model="addCus.ccompanyName"></el-input>
                    </el-form-item>
                    <el-form-item label="请输入客户的简称">
                        <span style="color:red">此为必填项</span>
                        <el-input v-model="addCus.ccompanySName"></el-input>
                    </el-form-item>
                    <el-form-item label="请输入地址">
                        <span style="color:red">此为必填项</span>
                        <el-input v-model="addCus.ccompanyAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="请输入公司电话">
                        <el-input v-model="addCus.ccompanyPhone"></el-input>
                    </el-form-item>
                    <el-form-item label="请输入邮件">
                        <el-input v-model="addCus.cemail"></el-input>
                    </el-form-item>
                    <el-form-item label="请输入联系人">
                        <span style="color:red">此为必填项</span>
                        <el-input v-model="addCus.cname"></el-input>
                    </el-form-item>
                    <el-form-item label="请输入联系人电话">
                        <span style="color:red">此为必填项</span>
                        <el-input v-model="addCus.ctelPhone"></el-input>
                    </el-form-item>
                    <el-form-item label="请输入客户的备注">
                        <el-input v-model="addCus.other"></el-input>
                    </el-form-item>
                    </el-form>
                    
                    <span slot="footer" >
                    <el-button @click="dialogVisible4 = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible4 = false,add()">确 定</el-button>
                    </span>
                </el-dialog>

                    <el-button type="primary" round @click="csv()">导出表格</el-button>


                    <el-table v-bind:data="cusData" border stripe style="width: 100%">
                      <el-table-column prop="cid" label="客户编号" width="150" ></el-table-column>
                      <el-table-column prop="ccompanyName" label="客户姓名" width="150" ></el-table-column>
                      <el-table-column prop="ccompanySName" label="客户简称" width="150" ></el-table-column>
                      <el-table-column prop="ccompanyAddress" label="地址" width="150"></el-table-column>
                      <el-table-column prop="ccompanyPhone" label="公司电话" width="150" ></el-table-column>
                      <el-table-column prop="cemail" label="邮件" width="150" ></el-table-column>
                      <el-table-column prop="cname" label="联系人" width="150" ></el-table-column>
                      <el-table-column prop="ctelPhone" label="联系人电话" width="150" ></el-table-column>
                      <el-table-column prop="other" label="备注" width="150" ></el-table-column>
                    </el-table>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>

import axios from 'axios';


export default {

    data: function(){
        return{
            askCus: {
            cid:'',
            ccompanyName:'',
            ccompanySName:'',
            ccompanyAddress:'',
            ccompanyPhone:'',
            cemail:'',
            cname:'',
            ctelPhone:'',
            other:''
        }, 
        addCus: {
            cid:'',
            ccompanyName:'',
            ccompanySName:'',
            ccompanyAddress:'',
            ccompanyPhone:'',
            cemail:'',
            cname:'',
            ctelPhone:'',
            other:''
        },
        updateCus: {
            cid:'',
            ccompanyName:'',
            ccompanySName:'',
            ccompanyAddress:'',
            ccompanyPhone:'',
            cemail:'',
            cname:'',
            ctelPhone:'',
            other:''
        }, 
        rmCus: {
            cid:'',
            ccompanyName:'',
            ccompanySName:'',
            ccompanyAddress:'',
            ccompanyPhone:'',
            cemail:'',
            cname:'',
            ctelPhone:'',
            other:''
        },
            cusData: [/* {
                cid:'',
                ccompanyName:'',
                ccompanySName:'',
                ccompanyAddress:'',
                ccompanyPhone:'',
                cemail:'',
                cname:'',
                ctelPhone:'',
                other:''
            } */],
            tmptb: [],
            dialogVisible1: false,
            dialogVisible2: false,
            dialogVisible3: false,
            dialogVisible4: false,
            updateVisible: false,
            editVisible1: false,
            editVisible2: false,
            editVisible3: false,
            editVisible4: false,
            editVisible5: false,
            editVisible6: false,
            editVisible7: false,
            editVisible8: false,
            editVisible9: false,
            selectRes: false
        }
    },
    methods: {
      //展示所有数据
    selectAll() {
      var that = this;
      axios.get("/TbCustomerSelectAll").then(function (result) {
        if (result.data.code == 1) {
          that.cusData = result.data.data; //result.data获取统一的json对象
          //result.data.data获取json对象中的属性data值
        } else {
          alert(result.data.msg);
        }
      });
    },
    //查
    select(Cid) {
      var that = this;
      axios({
            method: "get",
            url: "/TbCustomerSelectByCid/"+Cid,
        }).then(result => {
          if(result.data.code==1){
            alert("查询成功");
            that.askCus = result.data.data;
             this.selectRes = true;
             that.tmptb[0]=that.askCus;
          }else{
            that.$message.error(result.data.msg);
          }
        })
    },
    select1(Cid) {
      var that = this;
      axios({
            method: "get",
            url: "/TbCustomerSelectByCid/"+Cid,
        }).then(result => {
          if(result.data.code==1){
            alert("查询成功");
            that.updateCus = result.data.data;
            this.updateVisible = true;
          }else{
            that.$message.error(result.data.msg);
          }
        })
    },
    //增加
    add() {
      var that = this;
      axios.post("/TbCustomerInsert",this.addCus).then(function (result) {
         if (result.data.code==1){
              that.$message.success(result.data.msg);
            //关闭对话框
            that.dialogVisible4=false;
            //重新加载表格数据
            that.selectAll();
        }else {
            that.$message.error(result.data.msg);
        }
      });
      /* axios({
            method: "post",
            url: "/TbEmployeeInsert",
            params: this.addEmp
        }).then(result => {
         if (result.data.code==1){
              that.$message.success(result.data.msg);
            //关闭对话框
            that.dialogVisible4=false;
            //重新加载表格数据
            that.selectAll();
          }else {
              that.$message.error(result.data.msg);
          }
        }) */
    },
    //删除
    remove() {
      //提示框
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
        }).then(() => {
            //通过axios调用我们的删除接口
            var that = this;
            axios.delete("/TbCustomerDelete/"+ that.rmCus.cid).then(function (result){
                if (result.data.code==1){
                    //1.弹出一个信息
                    that.$message.success(result.data.msg);
                    //2.重新加载表格数据
                    that.selectAll();
                }else {
                    //弹出一个信息
                    that.$message.error(result.data.msg)
                }
            })
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });
        });
    },
    update(){
      var that = this;
      // this.updateEmp = this.select(this.updateEmp.eid);
      axios.post("/TbCustomerUpdate", this.updateCus).then(function (result) {
          if (result.data.code == 1) {
              that.$message.success(result.data.msg);
              //关闭对话框
              that.Visible = false;
              //重新加载表格数据
              that.selectAll();
              
          } else {
              that.$message.error(result.data.msg);
          }
      })
    },csv(){
       /*axios.get("/TbEmployeeExport") .then(function () {
          if (result.data.code == 1) {
              that.$message.success(result.data.msg);
              //关闭对话框
              that.Visible = false;
              //重新加载表格数据
              that.selectAll();
          } else {
              that.$message.error(result.data.msg);
          }
      }) */
    window.location.href = 'http://localhost:8083/TbCustomerExport'


    window.open('http://localhost:8083/TbCustomerExport', '_self'); // _self参数设置是为了不跳转到新界面上去
    let link = document.createElement('a')
        link.href = 'http://localhost:8083/TbCustomerExport'
        link.download = '下载文件名册'
        link.click()


    }  
    },
    mounted() {

      axios({
            method: "get",
            url: "/TbCustomerSelectAll",

        }).then(result => {
          if(result.data.code==1){
            this.empData=result.data.data;
          }else{
            alert(result.data.msg);
          }
        })

    },created() {
        this.selectAll();
    },
}
</script>


<style>
    .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
</style>